<template>
	<view class="page">
		<view class="my-top">
			<!-- 用户信息 -->
			<view class="user-info" v-if="hasLogin">
				<img class="portrait" :src="userInfo.headimg || comm_img_url+'/head.png'"/>
				<view class="info box-1" >
					<view class="nickname">
						<text>{{userInfo.nickname}}</text> 
					</view>
					<view class="rank">
						<text v-if="memberInfor.tel">tel:{{memberInfor.tel}}</text>
						<text class="bind-btn" v-else @click="exchangeFun">绑定手机号</text>
					</view>
					<view class="flex-box number-box" >
						<view class="box-1"  @tap="goNextPage('/pages/sub/wallet/balance')">
							余额 <text class="f-w">{{memberInfor.balance || 0.00}}</text>
						</view>
						<view class="box-1"  @tap="goNextPage('/pages/sub/wallet/wallet')">
							星豆 <text class="f-w">{{memberInfor.points || 0.00}}</text>
						</view>
					</view>
				</view>
				<view class="vip-box" v-if="memberInfor.user_level>0">
					<img :src="'../../static/nav/vip-'+memberInfor.user_level+'.png'" class="icon-vip"/>
					<view>
						{{memberInfor.user_level_name}}
					</view>
				</view>
			</view>
			  <view v-else class="user-info" @click="onUserInfo">
				<image src="/static/img/member.png" class="portrait"></image>
				<view class="info">
				  <view class="nickname">
					<text>登录/注册</text>
				  </view>
				</view>
				
			  </view>
			<!-- banner -->
			<!-- <image class="v-banner" src="/static/img/g-banner.png"></image> -->
			<swiper v-if="swiperList2.length>0" class="swiper2" circular="true" :indicator-dots="false" :interval="8000" :autoplay="false">
				
				<swiper-item v-for="(item,index) in swiperList2"  @tap="jumpType(item,index)" :key="index">
					<image  class="v-banner" :src="item.imgurl" ></image>
				</swiper-item>
<!--				<swiper-item>
					<image  class="v-banner" src="@/static/img/user-banner.png" @click="goNextPage('/pages/sub/upgradeList/upgradeList')"></image>
				</swiper-item>-->
			</swiper>
		</view>
		<!-- 我的畅打卡 -->
		<view class="my-wallet" style="padding-bottom:30rpx;">
			<view class="wallet-name flex-box" @tap="toServices(0)">
				<view class="box-1">我的畅打卡 </view>
				<u-icon name="arrow-right" color="#616161" size="16" :bold="true"></u-icon>
			</view>
			<view class="flex-box medal" style="justify-content: space-between;">
				<view class=" fw-li" @tap="toServices(1)" >
				  <image src="/static/img/oupons-use.png" class="fw-img"></image>
					<view class="fw-item">
						<view class="fw-text">已使用
							<text class="num1">{{memberInfor.coupon_num0 || 0}}</text>张
						 </view>
						 <image src="../../static/img/use-arrow.png" class="icon-item"></image>
					</view>
				</view>
				<view class=" fw-li"  @tap="toServices(0)">
					<image src="/static/img/oupons-waiting.png" class="fw-img"></image>
					<view class="fw-item">
						<view class="fw-text">待使用 
							<text class="num1">{{memberInfor.coupon_num1 || 0}}</text>张
						</view>
						 <image src="../../static/img/waiting-arrow.png" class="icon-item"></image>
					</view>
				</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="order-box">
			<view class="title flex-box" @click="onSkipOrder(-1)">
				<view class="box-1">
					我的订单 
				</view>
				<u-icon name="arrow-right" color="#616161" size="16" :bold="true"></u-icon>
			</view>
			<view class="order-info">
				<view class="list" @click="onSkipOrder(0)">
					<view class="icon">
						<image src="../../static/nav/order-1.png" class="ico-g"></image>
					</view>
					<view class="title">
						<text>待付款</text>
					</view>
				</view>
				<view class="list" @click="onSkipOrder(1)">
					<view class="icon">
						<image src="../../static/nav/order-2.png" class="ico-g"></image>
					</view>
					<view class="title">
						<text>待使用</text>
					</view>
				</view>
				<view class="list" @click="onSkipOrder(2)">
					<view class="icon">
						<image src="../../static/nav/order-3.png" class="ico-g"></image>
					</view>
					<view class="title">
						<text>待收货</text>
					</view>
				</view>
				<view class="list" @click="onSkipOrder(3)">
					<view class="icon">
						<image src="../../static/nav/order-4.png" class="ico-g"></image>
					</view>
					<view class="title">
						<text>已完成</text>
					</view>
				</view>
				
			</view>
		</view>
		
		<!-- 功能设置 -->
		<view class="my-service">
			<view class="title">
				<text>功能设置</text>
			</view>
			<view class="service-list">
				<view class="list" @click="onServer('team')">
					<view class="thumb">
						<image src="/static/nav/f-nav1.png"></image>
					</view>
					<view class="name">
						<text>我的团队</text>
					</view>
				</view>
				<view class="list" @click="onServer('writeOff')" v-if="memberInfor.is_store==1">
					<view class="thumb">
						<image src="/static/nav/f-nav2.png"></image>
					</view>
					<view class="name">
						<text>医院核销</text>
					</view>
				</view>
				<view class="list" @click="onServer('invite')">
					<view class="thumb">
						<image src="/static/nav/f-nav3.png"></image>
					</view>
					<view class="name">
						<text>邀请朋友</text>
					</view>
				</view>
				<view class="list" @click="onServer('setting')">
					<view class="thumb">
						<image src="/static/nav/f-nav4.png"></image>
					</view>
					<view class="name">
						<text>账号设置</text>
					</view>
				</view>
				<view class="list" @click="onServer('collection')">
					<view class="thumb">
						<image src="/static/nav/f-nav5.png"></image>
					</view>
					<view class="name">
						<text>收款账号</text>
					</view>
				</view>
				<view class="list" @click="onServer('addressList')">
					<view class="thumb">
						<image src="/static/nav/f-nav6.png"></image>
					</view>
					<view class="name">
						<text>收货地址</text>
					</view>
				</view>
				<view class="list" @click="callFun()" style="position:relative;">
					<view class="thumb">
						<image src="/static/nav/f-nav7.png"></image>
					</view>
					<view class="name">
						<text>客服中心</text>
					</view>
				</view>
				<view class="list" @click="onServer('about')">
					<view class="thumb">
						<image src="/static/nav/f-nav8.png"></image>
					</view>
					<view class="name">
						<text>关于我们</text>
					</view>
				</view>
				<!-- <navigator url="/pages/Station/apply" class="list">医院入驻</navigator> -->
			</view>
		</view>
    
		<!-- 客服热线 -->
		<view class="serve-hotline" @click="isHotline = false">
			<view class="cu-modal bottom-modal" :class="{'show':isHotline}">
			  <view class="cu-dialog">
					<view class="contact-list">
						<view class="list">
							<text>呼叫客服</text>
						</view>
						<view class="list">
							<text style="color: #959595;">400-800-900</text>
						</view>
						<view class="list">
							<text>取消</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-transition class="mask" mode="fade-up" :show="tel_show">
		
		<view class="popup-box">
			<view class="exchange-popup">
				<view class="flex-box popup-title">
					<view class="box-1">
						<view class="title">
							检测到您还未绑定手机号
						</view>
						<view class="num">
							为了方便您接收订单等信息，需要绑定手机号
						</view>
					</view>
					<u-icon size="28" name="close-circle" color="#000" @click="exchangeFun()"></u-icon>
				</view>
				<view class="input-num flex-box">
					<text>真实姓名</text>
					<input type="text" class="box-1" v-model="input.realname" placeholder-class="place-class" placeholder="请输入真实名字"/>
				</view>
				<view class="input-num flex-box">
					<text>手机号码</text>
					<input type="num" class="box-1" v-model="input.tel" maxlength="11" placeholder-class="place-class" placeholder="请输入手机号码"/>
				</view>
				<view class="flex-box">
					<view class="input-num flex-box">
						<text>验证码</text>
						<input type="num" class="box-1" v-model="input.auth_code" maxlength="6" placeholder-class="place-class" placeholder="请输入短信验证码"/>
					</view>
					<text class="get-code" @click="getAuthCode">{{code_text}}</text>
					<u-code :seconds="60" ref="uCode" @change="codeChange" changeText="(X)s" ></u-code>
				</view>
				<view class="exchange-btn" @click="bindTelFun">
					保存
				</view>
			</view>
		</view>
		
		</u-transition>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				comm_img_url:'',
				newImgUrl:'',//图片资源
				swiperList2:[],
				isHotline: false,
				memberInfor:{
					total_points:0,
					points:0,
					tel:'',
				},
				tel_show:false,
				input:{
					tel:'',
					auth_code:'',
					realname:''
				},
				code_text: '获取验证码',
				flag:false,
			};
		},
		computed: {
			...mapState(['hasLogin','userInfo']),
		},
		watch:{
			tel_show(val){
				console.log('111-',val);
				if(val){
					uni.hideTabBar()
				}else{
					uni.showTabBar()
				}
			}
		},
		onLoad() {
			this.comm_img_url = this.$c.appImg
			this.newImgUrl = this.$c.newImgUrl
			this.getHeng()
		},
		onShow() {
			if(this.hasLogin){
				this.getMemberIndex()
			}
		},
		methods:{
			//拨打电话
			callFun(val){
				// #ifdef H5
				window.location.href = `tel:18580914007`
				// #endif
			},
			//获取验证码
			getAuthCode() {
				if (!this.input.tel) {
					this.$u.toast('请输入手机号')
					return
				}
				uni.showLoading({
					title:"发送中，请注意查收！"
				})
				if (this.$refs.uCode.canGetCode) {
					this.$u.api.bindTel({
							send_sms_verifycode: '1',
							tel: this.input.tel
						})
						.then(res => {
							uni.hideLoading()
							if (res.status) {
								this.$refs.uCode.start();
								return
							}
							this.$u.toast(res.msg)
						})
						.catch(err => {
							uni.hideLoading()
							console.log(err);
			
						})
				}
			},
			//倒计时文字
			codeChange(text) {
				this.code_text = text;
			},
			//绑定手机号显示与隐藏
			exchangeFun(){
				this.tel_show = !this.tel_show 
			},
			//绑定手机号
			bindTelFun(){
				if(this.flag) {
					this.$u.toast('请勿重复操作')
					return
				}
				if (!this.input.realname) {
					this.$u.toast('请输入姓名')
					return
				}
				if (!this.$u.test.mobile(this.input.tel)) {
					this.$u.toast('请输入正确的手机号')
					return
				}
				if (!this.$u.test.code(this.input.auth_code, 6)) {
					this.$u.toast('请输入正确的验证码')
					return
				}
				this.flag = true
				this.$u.api.bindTel(this.input)
				.then(res=>{
					this.flag = false
					if(res.status){
						this.$u.toast(res.msg)
						//关闭绑定手机号
						this.exchangeFun()
						//重新请求个人中心数据
						this.getMemberIndex()
						return
					}
					this.$u.toast(res.msg)
				})
				.catch(err=>{
					this.flag = false
					console.log(err);
				})
			},
			//跳转下一页面
			goNextPage(url){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: url
				})
			},
			//
			jumpType(item,key) {
				console.log('swperClick')
				var path = item.link;
				if (item.link_type == 1) {
					uni.navigateTo({
						url: "/pages/web-view/web-view?url=" + JSON.stringify(path)
					})
				} else if (item.link_type == 2) {
					uni.switchTab({
						url: path
					})
				} else if (item.link_type == 3) {
					uni.navigateTo({
						url: path
					})
				}
			},
			// 个人中心横幅
			getHeng(){
				this.$u.api.souceAds({type:4}).then(res => {
						if (res.status) {
							this.swiperList2 = res.msg
						}
					})
					.catch(err => {
						console.log(err);
					})
			},
			//获取个人信息
			getMemberIndex(){
				this.$u.api.memberIndex()
				.then(res => {
					if(res.code == 501){
						//显示绑定手机号
						this.exchangeFun()
						return
					}
					if (res.status) {
						this.memberInfor = res.msg
					}
				})
				.catch(err => {
					console.log(err);
				})
			},
			// 我的服务
			toServices(index){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/sub/Services/Services?type='+index
				})
				return false
				
			},
			
			/**
			 * 关注跳转
			 */
			onCollect(type){
				switch (type){
					case 'goods':
						uni.navigateTo({
							url: '/pages/GoodsOn/GoodsOn'
						})
						break;
					case 'content':
						uni.navigateTo({
							url: '/pages/ContentCollection/ContentCollection'
						})
						break;
					case 'record':
						uni.navigateTo({
							url: '/pages/BrowsingHistory/BrowsingHistory'
						})
						break;
				}
			},
			/**
			 * 订单
			 */
			onSkipOrder(type){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				uni.navigateTo({
					url: '/pages/MyOrderList/MyOrderList?type=' + type,
				})
			},
			/**
			 * 钱包跳转点击
			 */
			onWallet(type){
				switch (type){
					case 'integral':
						uni.navigateTo({
							url: '/pages/IntegralDetails/IntegralDetails',
						})
						break;
					case 'coupon':
						uni.navigateTo({
							url: '/pages/MyCoupon/MyCoupon',
						})
						break;
					case 'wallet':
						uni.navigateTo({
							url: '/pages/MyWallet/MyWallet',
						})
						break;
					case 'SignIn':
						uni.navigateTo({
							url: '/pages/SignIn/SignIn',
						})
						break;
					case 'payment':
						uni.navigateTo({
							url: '/pages/PaymentCode/PaymentCode',
						})
						break;
				}
			},
			/**
			 * 我的服务点击
			 */
			onServer(type){
				if (!this.hasLogin) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
					return
				}
				switch (type){
					case 'declare':
						uni.navigateTo({
							url: '/pages/sub/declare/declare'
						})
						break;
					case 'signin':
						uni.navigateTo({
							url: '/pages/sub/SignIn/SignIn'
						})
						break;
					case 'team':
						uni.navigateTo({
							url: '/pages/sub/team/team'
						})
						break;
					case 'invite':
						uni.navigateTo({
							url: '/pages/sub/invite/invite'
						})
						break;
					case 'setting':
						uni.navigateTo({
							url: '/pages/sub/Setting/Setting'
						})
						break;
					case 'business':
						if(this.memberInfor.is_store==1){
						
							uni.navigateTo({
								url: '/pages/sub/Business/Business'
							})
						}else{
							uni.showToast({
								icon: 'none',
								title: '您还不是商家'
							})
							return false
						}
						break;
					case 'problem':
						uni.navigateTo({
							url: '/pages/sub/Problem/Problem'
						})
						break;
					case 'about':
						uni.navigateTo({
							url: '/pages/sub/AboutUs/AboutUs'
						})
						break;
					case 'addressList':
						uni.navigateTo({
							url: '/pages/sub/AddressList/AddressList'
						})
						break;
						
					case 'serve':
						this.isHotline = true;
						break;
					case 'writeOff':
            window.location.href = '/#/pages/sub/writeOff/writeOff'
					/*	uni.navigateTo({
							url: '/pages/sub/writeOff/writeOff'
						})*/
						break;
					case 'collection':
						uni.navigateTo({
							url: '/pages/sub/collection/collection'
						})
						break
				}
			},
			/**
			 * 设置点击
			 */
			onSetting(){
				uni.navigateTo({
					url: '/pages/Setting/Setting'
				})
			},
			/**
			 * 消息点击
			 */
			onMessage(){
				uni.navigateTo({
					url: '/pages/Message/Message'
				})
			},
			/**
			 * 会员点击
			 */
			onMmeberVip(){
				uni.navigateTo({
					url: '/pages/joinUs/index?classTab=2'
				})
				// uni.navigateTo({
				// 	url: '/pages/MembersOpened/MembersOpened',
				// })
			},
      /**
       * 跳转点击
       * @param {String} type 跳转类型
       */
      onSkip(type){
        switch (type){
          case 'goods':
            uni.navigateTo({
              url: '/pages/GoodsDetails/GoodsDetails',
              animationType: 'zoom-fade-out',
              animationDuration: 200
            })
            break;
        }
      },
      /**
       * 用户信息点击
       * @param {Number} type
       */
      onUserInfo(){
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
		},
		filters:{
			fixedNum(val){
				return parseFloat(val).toFixed(2)?? 0.00
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'my.scss';
</style>
